<template>
  <PageContainer>
    <Header v-model="headerHeight" title="搜索" :is-box-shadow="false">
      <template>
        <view class="hb-h-13 hb-bg-white hb-py-2 hb-pl-4 hb-flex hb-items-center hb-justify-center">
          <view
            class="hb-flex-1 hb-px-3 hb-h-full search hb-rounded-3xl hb-transition-colors hb-duration-200 hb-flex hb-items-center hb-justify-center hb-bg-[#F2F3F5]"
          >
            <text class="ali-icon hb-mr-1 hb-text-base hb-mr-3">&#xe694;</text>
            <input
              v-model.trim="searchVal"
              class="hb-flex-1"
              focus
              type="text"
              confirm-type="search"
              :placeholder="placeholder"
              @confirm="confirm"
            />
          </view>
          <view class="hb-px-4" @click="confirm">
            <tm-text label="搜索" :font-size="32" />
          </view>
        </view>
      </template>
    </Header>
    <view class="hb-bg-white" :style="{ height: `calc(100vh - ${headerHeight}px)` }">
      <view class="hb-px-4 hb-py-3">
        <view class="hb-flex hb-items-center hb-justify-between">
          <tm-text label="搜索历史" :font-size="32" />
          <tm-icon
            v-if="searchHistoryList.length"
            name="ali-icon icon-shanchu"
            color="grey-1"
            :font-size="42"
            @click="clear"
          />
        </view>
        <view class="hb-mt-3 hb-flex hb-flex-row hb-flex-wrap">
          <template v-for="v in searchHistoryList" :key="v.id">
            <tm-tag
              :round="10"
              text
              :shadow="0"
              color="grey-4"
              font-color="grey-darken-2"
              :follow-theme="false"
              size="m"
              :label="v.key"
              closable
              @click.stop="handleTagClick(v)"
              @close.stop="handleTagClose(v)"
            ></tm-tag>
          </template>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* searchPage 搜索 */
  import { getUrlName } from '@/router';
  import { SearchPage } from '@/router/types/modules/public';
  import { PagesType } from '@/router/types/pages';
  import { SearchHistoryVal, useSearchHistoryStore } from '@/store/modules/searchHistory';
  import { Toast } from '@/utils';

  const { getSearchHistory, createSearchHistoryItem, setSearchHistory, delSearchHistory } =
    useSearchHistoryStore();
  const page = getCurrentPages();
  const route = page.at(-2)?.route;
  const routeName = getUrlName(route) as PagesType;
  const headerHeight = ref(87);

  const searchHistoryList = ref<SearchHistoryVal[]>([]);
  if (routeName) searchHistoryList.value = getSearchHistory(routeName) || [];
  const placeholder = ref('搜索');
  const searchVal = ref('');
  let success: SearchPage['success'];

  customOnload<'searchPage'>((op) => {
    placeholder.value = op.placeholder;
    success = op.success;
  });

  function clear() {
    uni.showModal({
      title: '提示',
      content: '确定清空搜索历史吗？',
      success: (res) => {
        if (res.confirm) {
          delSearchHistory(routeName);
          searchHistoryList.value = [];
        }
      },
    });
  }

  function handleTagClick(item: SearchHistoryVal) {
    const newItem = createSearchHistoryItem(item.key);
    if (item) {
      item.updateTime = newItem.createTime;
      item.count += 1;
    }
    callback(item.key);
  }

  function handleTagClose(item: SearchHistoryVal) {
    const index = searchHistoryList.value.findIndex((v) => v.id === item.id);
    if (index !== -1) searchHistoryList.value.splice(1, index);
  }

  function confirm() {
    const val = searchVal.value;
    if (!val) return Toast('请输入搜索内容');
    const item = searchHistoryList.value.find((v) => v.key === val);
    const newItem = createSearchHistoryItem(val);
    if (item) {
      item.updateTime = newItem.createTime;
      item.count += 1;
    } else {
      searchHistoryList.value.push(newItem);
    }
    callback(val);
  }

  function callback(val: string) {
    setSearchHistory(routeName, unref(searchHistoryList));
    success?.(val);
    navigateBack();
  }
</script>

<style lang="scss" scoped></style>
